<template>
	<div class="bookdeta">
		<div class="bookli">
			<div class="bookimg">
				<img :src="`http://127.0.0.1/api/public/showimg/${this.book.pic}`" />
			</div>
			<div class="bookda">
				<h3>{{this.book.name}}</h3>
				<div>
					<table>
						<tr>
							<td>类别：</td>
							<td><b>{{this.type.name}}</b></td>
						</tr>
						<tr>
							<td>出版社：</td>
							<td><b>{{this.book.maker}}</b></td>
						</tr>
						<tr>
							<td>作者：</td>
							<td><b>{{this.book.author}}</b></td>
						</tr>
						<tr>
							<td>出版时间：</td>
							<td><b>{{this.book.tmake}}</b></td>
						</tr>
						<tr>
							<td>出版号：</td>
							<td><b>{{this.book.sn}}</b></td>
						</tr>
						<tr>
							<td>价格：</td>
							<td><b>{{this.book.price}}</b></td>
						</tr>
						<tr>
							<td>促销价：</td>
							<td><b>{{this.book.price2}}</b></td>
						</tr>
						<tr>
							<td>库存量：</td>
							<td><b>{{this.book.stock}}</b></td>
						</tr>
						<tr>
							<td>销售量：</td>
							<td><b>{{this.book.salenum}}</b></td>
						</tr>
						</tr>
						<el-button style="background-color: #ff4e00; color: whitesmoke;" size="mini"
							@click="add2Cart(book.id)">
							<i class="el-icon-shopping-cart-full"></i>
							加入购物车
						</el-button>
					</table>
				</div>

			</div>
			<div class="bk">
				<h3>同类商品推荐：</h3>
				<div v-for="item in typelist" :key="item.id" class="bookm" @click="showbook(item.id)">
					<div class="bookg">
						<div class="bookimg">
							<el-image fit="cover" :src="`http://127.0.0.1/api/public/showimg/${item.pic}`">
							</el-image>
						</div>
					</div>
					<div class="booke">
						<div class="bookname">
							<p>
								书名:{{item.name}}
							</p>
							<p style="color: red;">
								价格:{{item.price}}元
							</p>
						</div>
						<div class="addcart">
							<p>
								出版社：{{item.maker}}
								<br />
								作者：{{item.author}}
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bookxq">
			<div style="border-bottom: 1px solid lightcoral;">
				<h3 style="color: lightcoral;">商品详情</h3>

			</div>
			<div style="min-height: 3vw; margin-bottom: 2vw; font-size: 1.1em; font-weight: 500; display: flex; ">
				<div>
					<p v-html="book.info"></p>
				</div>
			</div>
		</div>
		<div>
			<h3 style="color: blueviolet;">商品评价</h3>
		</div>
		<div style="display: flex; max-height: 120px; overflow: hidden;">
			<div style="width: 80px; padding-top: 5px;">
				<el-avatar :size="70" :src="`http://127.0.0.1/api/public/showimg/${this.img}`">
				</el-avatar>
			</div>

			<div style="width: 100%; line-height: 24px; height: 80px;">
				<textarea rows='2'
					style="height: 45px; max-height: 45px; min-height: 45px; resize: none!; width: 90%; max-width: 90%; min-width: 90%;"
					v-model="content" placeholder="万水千山总是情, 评论2句...">
							</textarea>
				<div style="width: 50%; display: flex; ">
					<div style="width: 250px; display: flex; justify-content:center;  align-items:center; ">
						<span style="color: blueviolet; font-size: 1.1em; "><b>打分&nbsp;</b></span>
						<el-rate v-model="rate" text-color="#ff9900"></el-rate>
					</div>
					<el-button type="primary" size="mini" @click="addMemo()">发布</el-button>
				</div>
			</div>
		</div>
		<br />
		<div style="border-top: 1px solid lightblue; margin-bottom: 5px;">
			<div v-for="item in comments" style="display: flex; margin-top: 10px;">
				<div style="width: 60px;">
					<el-avatar :size="40" :src="`http://127.0.0.1/api/public/showimg/${item.img}`">
						<!-- < img  src = '@/assets/logo.png'/> -->
					</el-avatar>
				</div>
				<div style="width: 100%;">
					<div style="width: 60%; display: flex; height: 27px;">
						<div style="margin-right: 30px;"><b>{{item.nickname}}</b></div>
						<div style="margin-right: 30px;">{{item.tpost | fmtTime}}</div>
						<div style="margin-right: 30px;">
							<el-rate v-model="item.rate" text-color="#ff9900" disabled></el-rate>
						</div>
					</div>
					<div style="width: 100%; line-height: 24px; min-height: 40px; font-size: 1.1em; color: #303133;">
						{{item.content}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		myDate
	} from "@/util"
	export default {
		name: 'PCBookDeta',
		data() {
			return {
				rate: 3, //显示打分的星星
				content: '', //显示评论框输入的值，并在发布后显示
				bookid: null,
				currenbookid: null,
				img: '',
				book: {},
				type: {},
				typelist: [],
				comments: [],
				page: {
					num: 1,
					lines: 6,
					total: 0
				},
			}
		},
		methods: {
			add2Cart(bookid) {
				let token = localStorage.getItem('token');
				if (token == null) {
					alert('未登录！请先登录....');
					this.$router.push('/pc/login');
				} else {
					console.log('BOOKID' + bookid);
					this.$get("/api/public/addCart/" + bookid).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.data.msg);
						} else {
							this.$message.error(res.data.msg);
						}
					})
				}

			},
			getbook(bookid) {
				this.$get("/api/public/book/findById/" + bookid).then((res) => {
					this.book = res.data.data;
					this.type = res.data.data.type;
					console.log(this.book);
				})
			},
			showbook(id) {
				this.bookid = id;
				this.getbook(id)
			},
			gettype() {
				let start = 1;
				let num = 6;
				this.$get("/api/public/book/findById/" + this.bookid).then((res) => {
					this.book = res.data.data;
					this.type = res.data.data.type;
					console.log(this.book);
					this.$get("/api/public/findPageBook/" + start + "/" + num + "/" + this.type.id)
						.then((res) => {
							this.typelist = res.data.data.books;
							console.log(this.typelist);
						})
				})
			},
			addMemo() {
				let token = localStorage.getItem('token');
				console.log(this.rate);
				let obj = {
					rate: this.rate,
					content: this.content
				}
				if(token == null){
					alert('未登录！无法对商品进行评价，请先登录....');
					this.$router.push('/pc/login');
				}else{
					this.$postx("/api/public/rate/add/" + this.book.id, obj).then(
						(resp) => {
							if (resp.data.code != 200) {
								this.$message.error(resp.data.msg)
							} else {
								this.$message.success("评价完毕....");
								this.page.num = 1;
								this.$get("/api/public/rate/findByBookid/" + this.book.id + "/" + this.page.num + "/" +
										this.page.lines)
									.then((resp) => {
										this.page.total = resp.data.data.total;
										this.comments = resp.data.data.comments;
									})
							}
						}
					)
				}
			},
			getrate() {
				this.$get("/api/public/rate/findByBookid/" + this.bookid + "/" + this.page.num + "/" + this.page.lines)
					.then((resp) => {
						this.page.total = resp.data.data.total;
						this.comments = resp.data.data.comments;
						console.log(this.comments);
					})
			}
		},
		filters: {
			fmtDay(d) {
				let s = myDate.formatDay(d)
				return s;
			},
			fmtTime(d) {
				let s = myDate.formatAll(d);
				return s;
			},
		},
		created() {
			this.img = localStorage.getItem('img');
		},
		mounted() {
			this.bookid = this.$route.query.book_id;
			this.getbook(this.bookid);
			this.gettype();
			this.getrate();
		}
	}
</script>

<style scoped>
	.bookdeta {
		width: 100%;
		height: 100%;
	}

	.bookdeta .bookli {
		width: 100%;
		display: flex;
	}

	.bookli .bookimg {
		width: 30%;
	}

	.bookli .bookimg img {
		width: 100%;
		height: 100%;
	}

	.bookli .bookda {
		width: 39%;
		margin-left: 10%;
	}

	.bookli .bookda table {
		font-size: 1.1em;
		line-height: 50px;
	}

	.bookxq {
		margin-top: 5px;
		padding-left: 20px;

	}

	.bk {
		width: 30%;
		height: 100%;
		overflow: hidden;
		border: 1px solid #d9deff;
	}

	.bk .bookm {
		width: 100%;
		height: 75px;
		display: flex;
		margin-bottom: 3px;
		border: 1px solid #d9deff;
		cursor: pointer;
	}

	.bk .bookg {
		border-radius: 3px;
		width: 60px;
		height: 60px
	}

	.bk .bookimg {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border: 1px solid lightgrey;
		border-radius: 25px;
	}

	.bk .booke {
		margin-left: 3px;
		width: 70%;
	}

	.bk .bookname {
		display: flex;
		justify-content: space-between;
	}

	.bk .bookname p {
		color: #606266;
		font-size: 14px;
		font-weight: 800;
		overflow: hidden;
	}

	.bk .addcart {
		display: flex;
		justify-content: space-between;
	}

	.bk .addcart p {
		width: 100%;
		background-color: white;
		font-size: 14px;
	}
</style>